<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
	<!--首页导航条-->
	<div class="navbar navbar-default navbar-fixed-top" style="margin-bottom: 1px;">
		<div class="container">
			<div class="navbar-header">
				<!--一般品牌logo会是一张图片.我们可以在下面a标签中放一个img标签.记得把a标签加个padding:0;不然图片不居中.
					
				-->
				<a class="navbar-brand" href="#"><img src="img/kpit2.png"/></a>
				<!--这个按扭后会智能显示:class="navbar-toggle",让要记得把下面折叠菜单关联起来 -->
				<button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
					<!-- 让按扭有三条横线,好看些 -->
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
			</div>
			<div class="collapse navbar-collapse" id="navbar-collapse">
				<!--下拉时有一点点空隙,把UL的margin-top设为0就可以了.-->
				<ul class="nav navbar-nav navbar-right" style="margin-top: 0;">
					<li><a href="index.html"><span class="glyphicon glyphicon-home"></span>首页</a></li>
					<li><a href="news.html"><span class="glyphicon glyphicon-list"></span>资讯</a></li>
					<li class="active"><a href="case.html"><span class="glyphicon glyphicon-fire"></span>案例</a></li>
					<li><a href="about.html"><span class="glyphicon glyphicon-question-sign"></span>关于</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!--来个巨幕-->
	<div class="jumbotron" style="background-image: url(img/bg.jpg); margin-top: 50px;">
		<div class="container">
			<h2>案例</h2>
			<p>学员作品展示平台......</p>
		</div>
	</div>
	<!--中间内容区-->
	<div class="n3-center">
		<div class="container">
			<div class="row">
				<!-- -->
				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
					<div class="thumbnail">
						<img src="img/zp43.jpg"/>
						<div class="caption">
							<h3 class="text-center">飞速前进</h3>
							<p class="text-muted text-center">鲲鹏Iphone 4班     易*雄作品。</p>
						</div>
					</div>
				</div>
				<!-- -->
				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
					<div class="thumbnail">
						<img src="img/zp42.jpg"/>
						<div class="caption">
							<h3 class="text-center">魔法世界</h3>
							<p class="text-muted text-center">鲲鹏iPhone 11班     姚*鸣作品。</p>
						</div>
					</div>
				</div>
				<!-- -->
				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
					<div class="thumbnail">
						<img src="img/zp41.jpg"/>
						<div class="caption">
							<h3 class="text-center">魔兽棋魂</h3>
							<p class="text-muted text-center">鲲鹏iPhone11班     易* 作品。</p>
						</div>
					</div>
				</div>
				<!-- -->
				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
					<div class="thumbnail">
						<img src="img/zp39.jpg"/>
						<div class="caption">
							<h3 class="text-center">企业人事管理系统</h3>
							<p class="text-muted text-center">鲲鹏T40班     钟*元 作品。</p>
						</div>
					</div>
				</div>
				
			</div>
		</div>
	</div>
	<!--分页-->
	<div class="page" style="text-align: center;">
		<ul class="pagination">
			<li><a href="">&laquo;</a></li>
			<li><a href="">1</a></li>
			<li class="active"><a href="">2</a></li>
			<li><a href="">3</a></li>
			<li><a href="">&raquo;</a></li>
		</ul>
	</div>

	<!--底部-->
	<div class="n2-footer">
		<div class="container">
			<p class="text-center">招生计划 | 合作事宜 | 投诉建议</p>
			<p class="text-center">湘ICP 备00000000号  &copy; 2015-2018 XX官方网站. Powered by Bootstrap.</p>
		</div>
	</div>
	<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>